<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell
        title="我的频道"
        :border="false"
      >
        <van-button
          size="mini"
          type="info"
          @click="isShowEdit=!isShowEdit"
        >{{isShowEdit?"取消":"编辑"}}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="channel,idx in channels"
          :key="idx"
          :class="{red: idx===curidx}"
          @click="hClickChannel(idx)"
        >
          <span>{{channel.name}}</span>
          <van-icon
            name="cross"
            class="btn"
            v-show="isShowEdit&&idx!==0"
            @click="hDelChannel(channel,idx)"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell
        title="可选频道"
        :border="false"
      ></van-cell>
      <van-grid>
        <van-grid-item
          v-for="reChannel,idx in recommendChannels"
          :key="idx"
          @click="hAddChannel(reChannel)"
        >
          <span>{{reChannel.name}}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannels, addChannels, delChannel } from '../../api/channel.js'
export default {
  name: 'ChannelEdit',
  props: ['channels', 'curidx'], // 父组件传入的用户频道信息
  data () {
    return {
      allChannels: [], // 所有频道管理保存
      isShowEdit: false
    }
  },
  created () {
    // 当组件被创建时触发请求
    this.loadAllChannels()
  },
  computed: {
    // 通过计算属性对数据加工，得到所需的可选频道数据，计算方式：全部频道-用户频道
    recommendChannels () {
      return this.allChannels.filter(channel => {
        const idx = this.channels.findIndex(item => channel.id === item.id)
        if (idx === -1) { // idx值为-1时，代表当前频道并非用户选中频道
          return true
        }
      })
    }
  },
  methods: {
    // 请求全部频道数据
    async loadAllChannels () {
      try {
        const res = await getAllChannels()
        this.allChannels = res.data.data.channels
        // console.log(this.allChannels)
        // console.log(this.channels)
        // console.log(this.recommendChannels)
      } catch (err) {
        console.log(err)
      }
    },
    hClickChannel (idx) {
      // 如果this.isShowEdit为true代表正在编辑，点击不触发父组件事件跳转
      if (!this.isShowEdit) {
        this.$emit('changechannel', idx)
      }
    },
    // 添加频道
    async hAddChannel (rechannel) {
      // 当用户点击可选频道时把点击的频道加入到关注的频道里
      const channelObj = [...this.channels, rechannel].map((item, index) => {
        // 通过map循环遍历修改值为后端需要的值，返回一个全新的数组
        return {
          id: item.id,
          seq: index
        }
      })
      // console.log(channelObj)
      // 删除推荐选项，不然会报错
      channelObj.splice(0, 1)
      try {
        // 发送添加频道请求
        const res = await addChannels(channelObj)
        console.log(res)
        this.$toast.success('添加频道成功')
        // 添加成功后，在关注频道列表中加入点击的频道列表，通过计算属性检测数据变化而实时更新
        this.channels.push(rechannel)
      } catch (err) {
        this.$toast.fail('添加频道失败')
        console.log(err)
      }
    },
    // 删除频道
    async hDelChannel (channel, idx) {
      try {
        // 发送删除请求
        const res = await delChannel(channel.id)
        console.log(res)
        // 给父组件触发事件，变更active值
        this.$emit('update-active', idx)
        // 在当前频道列表中通过索引删除被点击的频道
        this.channels.splice(idx, 1)
        this.$toast.success('删除频道成功')
      } catch (err) {
        this.$toast.fail('删除频道失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
.red {
  color: red;
  font-weight: 700;
}
</style>
